<template>
<Card>
    <p slot="title">
        <Breadcrumb>
            <BreadcrumbItem to="/dashboard/index"><Icon type="ios-home-outline"></Icon> 首页</BreadcrumbItem>
            <BreadcrumbItem to="/product/list"><Icon type="ios-list"></Icon> 商品管理</BreadcrumbItem>
            <BreadcrumbItem to="/product/list"><Icon type="ios-copy-outline"></Icon> 店铺商品</BreadcrumbItem>
        </Breadcrumb>
    </p>
    <Form class="step-form" ref="searchForm" :model="searchForm" :rules="searchFormRules" :label-width="100">
        <Row>
            <Col span="6">
            <FormItem label="状态：" prop="status">
                <Select v-model="searchForm.status">
                    <Option value="">全部</Option>
                    <Option value="0">等待平台确认</Option>
                    <Option value="1">平台已确认并发货</Option>
                    <Option value="2">已退款</Option>
                    <Option value="3">已撤销</Option>
                </Select>
            </FormItem>
            </Col>
            <Col span="7">
            <Row>
                <Col span="12">
                <FormItem label="添加时间：" prop="date_s">
                    <DatePicker :disabled="hasSubmit" type="date" placeholder="开始时间" prop="date_s" v-model="searchForm.date_s"></DatePicker>
                </FormItem>
                </Col>
                <Col span="1" style="text-align: center">-</Col>
                <Col span="7">
                <FormItem :label-width="1" prop="date_e">
                    <DatePicker :disabled="hasSubmit" type="date" placeholder="结束时间" prop="date_e" v-model="searchForm.date_e"></DatePicker>
                </FormItem>
                </Col>
            </Row>
            </Col>
            <Col span="7">
            <FormItem>
                <Button type="primary" :disabled="hasSubmit" @click="handleSubmit('searchForm')" icon="search">查询</Button>
                <Button type="ghost" @click="handleReset('searchForm')" style="margin-left: 8px">重置</Button>
            </FormItem>
            </Col>
        </Row>
    </Form>
    <ButtonGroup v-if="this.tableSelects.length>0">
        <Poptip
                confirm
                title="确认全部隐藏吗？"
                @on-ok="handeHide(1)"
                >
            <Button>全部隐藏</Button>
        </Poptip>
        <Poptip
                confirm
                title="确认全部显示吗？"
                @on-ok="handeHide(0)"
                >
            <Button>全部显示</Button>
        </Poptip>
    </ButtonGroup>
    <Table
        border
        ref="selection"
        :columns="columns"
        :data="list"
        :loading="loading"
        @on-selection-change="this.selectRow"
    ></Table>
    <div style="margin: 10px;overflow: hidden">
        <div style="float: right;">
            <Page
            :total="total"
            :current="current"
            :page-size="pageSize"
            :show-elevator="true"
            :page-size-opts="[12, 20, 30, 40]"
            :show-sizer="true"
            @on-change="changePage"
            @on-page-size-change="changePageSize"
            ></Page>
        </div>
    </div>
</Card>
</template>
<script>
import Util from '../../libs/util';
import moment from 'moment';
import expandRow from './components/purchaseLogTableExpand.vue';
import Cookies from 'js-cookie';

export default {
    data () {
        return {
            columns: [
                // {
                //     type: 'selection',
                //     key: 'id',
                //     width: 60,
                //     align: 'center'
                // },
                {
                    title: '',
                    type: 'expand',
                    width: 50,
                    render: (h, params) => {
                        return h(expandRow, {
                            props: {
                                row: params.row
                            }
                        });
                    }
                },
                {
                    title: 'ID',
                    align: 'center',
                    width: 60,
                    key: 'id'
                },
                {
                    title: '支付金额',
                    ellipsis: true,
                    key: 'pay_money'
                },
                {
                    title: '采购备注',
                    key: 'remark'
                },
                {
                    title: '状态',
                    key: 'status_text'
                },
                {
                    title: '采购时间',
                    key: 'create_time',
                    render: (h, params) => {
                        return h('div', Util.formatDate(params.row.create_time));
                    }
                },
                {
                    title: '操作',
                    key: 'action',
                    width: 200,
                    align: 'center',
                    render: (h, params) => {
                        if (this.admin_type != 3) {
                            return;
                        }
                        if (params.row.status != 0) {
                            return;
                        }
                        return h('div', [
                            h('Button', {
                                props: {
                                    size: 'small'
                                },
                                style: {
                                    marginRight: '5px'
                                }
                            }, [
                                h('Poptip', {
                                    props: {
                                        confirm: true,
                                        title: '确定款项已到账并向店铺划入库存吗！',
                                        size: 'small'
                                    },
                                    on: {
                                        'on-ok': () => {
                                            this.checkLog(params.row.id, 1);
                                        }
                                    }
                                }, '确认')
                            ]),
                            h('Button', {
                                props: {
                                    size: 'small'
                                },
                                style: {
                                    marginRight: '5px'
                                }
                            }, [
                                h('Poptip', {
                                    props: {
                                        confirm: true,
                                        title: '确定要退款并已退还对方账户吗？',
                                        size: 'small'
                                    },
                                    on: {
                                        'on-ok': () => {
                                            this.checkLog(params.row.id, 2);
                                        }
                                    }
                                }, '退款')
                            ]),
                            h('Button', {
                                props: {
                                    size: 'small'
                                },
                                style: {
                                    marginRight: '5px'
                                }
                            }, [
                                h('Poptip', {
                                    props: {
                                        confirm: true,
                                        title: '确认对方款项未到账并撤销吗？',
                                        size: 'small'
                                    },
                                    on: {
                                        'on-ok': () => {
                                            this.checkLog(params.row.id, 3);
                                        }
                                    }
                                }, '撤销')
                            ])
                        ]);
                    }
                }
            ],
            list: [],
            total: 0,
            current: this.$route.params.page ? this.$route.params.page : 1,
            pageSize: 12,
            loading: true,
            searchForm: {
                status: [],
                date_s: '',
                date_e: ''
            },
            searchFormRules: {
            },
            hasSubmit: false,
            tableSelects: [],
            cateList: [],
            admin_type: Cookies.get('admin_type')
        };
    },
    mounted: function () {
        this.$nextTick(function () {
            const $params = {page: this.current};
            this.getList($params);
        });
    },
    methods: {
        getList: function (params) {
            Util.ajax.post(`/adminapi/product/purchaselog`, params).then(response => {
                this.list = response.data.data.list;
                this.total = response.data.data.total;
                this.current = response.data.data.current;
                this.pageSize = response.data.data.pageSize;
                this.loading = false;
                this.hasSubmit = false;
            });
            // this.searchBrnLoading = false;
        },
        selectRow (selection, row) {
            this.tableSelects = selection;
        },
        handeHide (hideVal) {
            let ids = [];
            this.tableSelects.map(function (v, i) {
                ids[i] = v.article_id;
            })
            const params = {article_id: ids, is_hide: hideVal};
            Util.ajax.post(`/adminapi/product/edit`, params).then(response => {
                if(response.data.errCode==0) {
                    const params = {page: this.current, pageSize: this.pageSize};
                    this.getList(params);
                    this.$Message.success('操作成功');
                }else {
                    this.$Message.error('操作失败');
                }
            });
        },
        show (product_id) {
            window.open("/#/mallDetails?id=" + product_id);
            // this.$Modal.info({
            //     title: '详情',
            //     scrollable: true,
            //     closable: true,
            //     width: 700,
            //     content: `<strong>平台</strong>：${this.list[index].name}<br><strong>内容</strong>：<div>${this.list[index].content}</div><br><strong>交易类型</strong>：${this.list[index].cate_str}`
            // });
        },
        remove (index) {
            this.data6.splice(index, 1);
        },
        formatDate (datetime) {
            const date =  new Date(parseInt(datetime) * 1000);
            const y = date.getFullYear();
            let m = date.getMonth() + 1;
            m = m < 10 ? '0' + m : m;
            let d = date.getDate();
            d = d < 10 ? ('0' + d) : d;
            return y + '-' + m + '-' + d;
        },
        changePage (e) {
            this.loading = true;
            const params = {page: e, pageSize: this.pageSize};
            this.list = this.getList(params);
        },
        changePageSize (e) {
            this.loading = true;
            const params = {page: 1, pageSize: e};
            this.list = this.getList(params);
        },
        handleSubmit (name) {
            this.$refs[name].validate((valid) => {
                if (valid) {
                    this.hasSubmit = true;
                    let params = {
                        ...this.searchForm,
                        page: 1,
                        pageSize: this.pageSize
                    };
                    params.date_s = params.date_s? moment(params.date_s).format('X'): '';
                    params.date_e = params.date_e? moment(params.date_e).subtract(-1, "days").format('X'): '';
                    this.getList(params);
                }
            });
        },
        handleReset (name) {
            this.$refs[name].resetFields();
            this.searchForm.cate_id = [];
            this.hasSubmit = false;
            this.getList();
        },
        checkLog (logId, status) {
            Util.ajax.post(`/adminapi/product/checkpurchaselog`, {log_id: logId, status: status}).then(response => {
                if(response.data.code==0) {
                    const params = {page: this.current, pageSize: this.pageSize};
                    this.getList(params);
                    this.$Message.success('操作成功');
                } else {
                    this.$Message.error(response.data.msg);
                }
            });
        }
    }
};
</script>
